<template>
  <a-form :form="form" layout="inline">
    <a-button type="primary" @click="setAttrsValue('edit')">{{$ti18('rxList.editBtn','编辑')}}</a-button>
    <a-button type="primary" @click="setAttrsValue('read')">{{i18n('list.onlyRead','只读')}}</a-button>
    <a-button type="primary" @click="setAttrsValue('require')">{{i18n('list.required','必填')}}</a-button>

    <rx-grid ref="table"
             :dataSource="headerFields"
             :allowRowSelect="true"
             :multiSelect="true"
             :showPage="false"
             :columns="headerColumns"
             style="height: 370px;"
    >
        <span slot="name" slot-scope="{text,record,index,blur}">
          {{text}}
        </span>
      <span slot="alias" slot-scope="{text,record,index,blur}">
          {{text}}
        </span>
      <span slot="edit" slot-scope="{text,record,index,blur}">
        <form-user-permission-edit v-model="record.edit" @ok="blur(index,'edit',$event,record)">
        </form-user-permission-edit>
      </span>
      <span slot="read" slot-scope="{text,record,index,blur}">
         <form-user-permission-edit v-model="record.read" @ok="blur(index,'read',$event,record)">
        </form-user-permission-edit>
        </span>
      <span slot="require" slot-scope="{text,record,index,blur}">
           <form-user-permission-edit v-model="record.require" @ok="blur(index,'require',$event,record)">
        </form-user-permission-edit>
        </span>
    </rx-grid>
  </a-form>
</template>
<script>
  import {BaseForm, RxLayout, RxGrid, RxCodemirror} from "@lowcode/jpaas-common-lib";

  import FormUserPermissionEdit from './FormUserPermissionEdit';
  import formPermissionApi from '@/api/form/core/formPermission';



  export default {
    name: 'FormPermissionUserEdit',
    mixins: [BaseForm],
    props: {
      mainData: {
        type: Array,
        default: []
      }
    },
    components: {
      RxLayout,
      RxGrid,
      RxCodemirror,
      FormUserPermissionEdit
    },
    data() {
      return {
        selectAllType:"",
        changeValue: {},
        activeKey: "columnConf",
        isAllowDataGrant: false,
        isLeftTree: 'NO',
        expandedRowKeys: [],
        fieldDatas: [],
        headerFields: [],
        headerColumns: [
          {title: this.i18n('form.name','字段名称'), dataIndex: 'name', allowCellEdit: true, scopedSlots: {customRender: 'name'}},
          {title: this.i18n('form.key','字段Key'), dataIndex: 'alias', allowCellEdit: true, scopedSlots: {customRender: 'alias'}},
          {
            title: this.$ti18('rxList.editBtn','编辑'),
            dataIndex: 'edit',
            displayField: 'edit_name',
            allowCellEdit: true,
            scopedSlots: {customRender: 'edit'}
          },
          {
            title: this.i18n('list.onlyRead','只读'),
            dataIndex: 'read',
            displayField: 'read_name',
            allowCellEdit: true,
            scopedSlots: {customRender: 'read'}
          },
          {
            title: this.i18n('list.required','必填'),
            dataIndex: 'require',
            displayField: 'require_name',
            allowCellEdit: true,
            scopedSlots: {customRender: 'require'}
          }]
      }
    },
    created() {
      this.headerFields = this.mainData;
    },
    methods: {
      i18n(name,text,key){
          return this.$ti18(name,text,"formPermiss",key);
      },
      setAttrsValue(type) {
        this.selectAllType=type;
        var selectDatas = this.$refs.table.getSelectedRows();
        if (!selectDatas || selectDatas.length == 0) {
          this.$message.info(this.i18n('msg.setAttrMsg','请先选择需要设置的列数据，再进行操作！'));
          return;
        }
        var self_=this;
        formPermissionApi.openPermissionUser({
          curVm: this, widthHeight: ['800px','500px']
        },function(self_,data){
          var selectDatas = self_.$refs.table.getSelectedRows();
          for(var i=0;i<selectDatas.length;i++){
            var row =selectDatas[i];
            self_.setChangeValues(data,row);
          }
        });
      },
      setChangeValues(data,row){
        var typeName = this.selectAllType + "_name";
        var rowData={};
        rowData[this.selectAllType] = data.value;
        rowData[typeName] = data.label;
        this.$refs.table.updateRow(row,rowData);
      }
    }
  }
</script>
